<template>
    <div>
        <a-form :form="form" layout="inline" @submit.prevent="onSubmit" :style="{marginBottom: '20px'}" id="orders-search">
            <div class="order-query">
                <a-form-item label="生成时间">
                    <!-- <day-range @change="(data)=>this.created_at = data" :constantTime="created_at" :style="{display: 'inline'}"></day-range> -->
                    <a-range-picker v-decorator="['created_at', {
                        rules: [{ type: 'array', required: false, message: 'Please select time!' }],
                    }]" style="width: 240px;"/>
                </a-form-item>
                <a-form-item>
                    <a-input placeholder="请输入订单号或服务号信息" v-decorator="['name']" style="width: 196px;"/>
                </a-form-item>
                <a-form-item>
                    <a-select v-decorator="['goods_id']" placeholder="服务类型">
                        <a-select-option v-for="v in types" :key="v.id" :value="v.id">
                            {{v.name}}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item>
                    <a-select v-decorator="['status']" placeholder="订单状态" style="width: 124px;">
                        <a-select-option v-for="(v,k) in statuses" :key="k" :value="k">
                            {{v}}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :style="{flexGrow: 1}">
                    <a-button type="primary" html-type="submit" style="width: 100px;">
                        筛选
                    </a-button>
                </a-form-item>
            </div>
        </a-form>
        <a-table :columns="columns" :dataSource="tableData" rowKey="id" :pagination="pagination" bordered>
            <span slot="sn" slot-scope="text, record">
                <i v-if="record.is_urgent == '1'" style="color:#FF5151">{{record.name}}<p>{{record.sn}}</p></i>
                <i v-else>{{record.name}}<p>{{record.sn}}</p></i>
            </span>
            <template slot="pay" slot-scope="text, record">
                <i v-if="record.period !== record.can_pay || record.can_pay <= 3" style="color:#FF5151">{{record.can_pay}}</i>
                <i v-else>{{record.can_pay}}</i>
            </template>
            <template slot="tips" slot-scope="text, record">
                <a-tooltip placement="rightTop" v-if="record.remark.length > 15">
                    <template slot="title">
                        <span>{{record.remark}}</span>
                    </template>
                    <p class="order_remark">{{record.remark}}</p>
                </a-tooltip>
                <p v-else class="order_remark">{{record.remark ? record.remark : '无'}}</p>
            </template>
            <span slot="action" slot-scope="text, record">
                <router-link :to="'/orders/update/'+record.id" v-if="menu_role.includes('/orders/update')"><a-badge v-if="record.had_push"  dot><img src="./../../assets/images/view.svg" alt=""></a-badge> <span v-else><img src="./../../assets/images/view.svg" alt=""></span></router-link>
            </span>
        </a-table>
    </div>
</template>

<script>
    import DayRange from "@/components/dayRange";
    import moment from "moment";

    export default {
        components:{DayRange},
        data() {
            return {
                pagination: {
                    current: 1,
                    total: 0,
                    pageSize: 10,
                    showQuickJumper: true,
                    onChange: (page, size) => {
                        this.handleChange(page, size)
                    },
                },
                tableData: [],
                columns: [
                    {title: '订单', scopedSlots: {customRender: 'sn'}, align: 'center', width: '16%'},
                    {title: '服务号名称', dataIndex: 'service_name', align: 'center', width: '17%'},
                    {title: '剩余周期', dataIndex: 'period', align: 'center', width: '10%'},
                    {title: '可支付周期', scopedSlots: {customRender: 'pay'}, align: 'center', width: '12%'},
                    //{title: '已完成周期', dataIndex: 'complete_period', align: 'center', width: '15%'},
                    {title: '总周期', dataIndex: 'total_period', align: 'center', width: '10%'},
                    {title: '订单备注', dataIndex: 'remark', align: 'center', scopedSlots: {customRender: 'tips'}, width: '10%'},
                    {title: '状态', dataIndex: 'status', align: 'center', width: '9%'},
                    // {title: '报告', dataIndex: 'report_num', align: 'center', width: '6%'},
                    {title: '操作', scopedSlots: {customRender: 'action'}, align: 'center', width: '10%'},
                ],
                form: this.$form.createForm(this),
                search: {},
                types: [],
                statuses: [],
                created_at: moment().format('YYYY-MM-DD') + ' ~ ' + moment().format('YYYY-MM-DD')
            }
        },

        mounted() {
            this.getList();
            this.getGoods()
        },
        methods: {
            async getList(param = {}) {
                let req = {page_size: this.pagination.pageSize, page: this.pagination.current};

                let data = await this.http(
                    "get",
                    "orders/index",
                    Object.assign(req, param)
                );
                this.tableData = data.data;
                //this.types = data.types;
                this.statuses = data.statuses;
                this.pagination.total = data.total_count;
            },
            /**获取产品 */
            getGoods(){
                this.http("get","goods/index",{page_size:100,status:1}).then(res=>{
                    this.types = res.data
                })
            },
            onSubmit() {//搜索提交
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.pagination.current = 1
                        // values.created_at = moment(this.created_at.split('~')[0], 'YYYY-MM-DD').format('YYYY年MM月DD日') + '-' +
                        //     moment(this.created_at.split('~')[1], 'YYYY-MM-DD').format('YYYY年MM月DD日')
                        if (values.created_at && values.created_at.length > 0) {
                            let startAt = moment(values.created_at[0]).format('YYYY年MM月DD日')
                            let endAt = moment(values.created_at[1]).format('YYYY年MM月DD日')
                            let startEndAt = startAt + '-' + endAt
                            values.created_at = startEndAt
                        } else {
                            values.created_at = undefined
                        }
                        this.search = values
                        this.getList(values)
                    }
                })
            },
            handleChange(page, size) {
                //列表展示条数改变
                this.pagination.current = page
                this.pagination.pageSize = size;
                this.getList(this.search);
            },
        }
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "./../../assets/scss/mixin";
    #orders-search {
        .ant-input {
            width: 220px;
        }

        .ant-select {
            width: 150px;
        }
    }

    .order_remark {
        width: 230px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
    }

    .order-query {
        @include fj(space-between);
        .ant-form-item + .ant-form-item{
            margin-left: 10px;
        }
    }
</style>
